<style>
    .profile-avatar-container {
        position: relative;
        width: 100px;
        margin: 0 auto;
    }

    .profile-avatar-container .profile-user-img {
        width: 100px;
        height: 100px;
        margin-bottom: 50px;
    }

    .profile-avatar-container .profile-avatar-text {
        display: none;
    }

    .profile-avatar-container:hover .profile-avatar-text {
        display: block;
        position: absolute;
        height: 100px;
        width: 100px;
        background: #444;
        opacity: .6;
        color: #fff;
        top: 0;
        left: 0;
        line-height: 100px;
        text-align: center;
    }

    .profile-avatar-container button {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        opacity: 0;
    }
    .form-group {
        text-align: center;
    }
    .goods-list {
        padding: 10px;
        background: #EEEEEE;
        border-bottom: 1px solid #DDDDDD;
        line-height: 35px;
    }
    #right-icon {
        margin-left: 20px;
    }
    .goods-detail {
        color: grey;
    }
    .order-mony {
        margin-left: 40px;
    }
</style>
<div class="row animated fadeInRight">
    <div class="col-md-4">
        <div class="box box-success">
            <div class="panel-heading">
                {:__('Profile')}
            </div>
            <div class="panel-body">

                <form id="update-form" role="form" data-toggle="validator" method="POST" action="">
                    {:token()}
                    <input type="hidden" id="c-avatar" name="row[avatar]" value="{$consumer.headavatar|htmlentities}"/>
                    <div class="box-body box-profile">

                        <div class="profile-avatar-container">
                            <img class="profile-user-img img-responsive img-circle plupload" src="{$consumer.headavatar|cdnurl|htmlentities}" alt="">
<!--                            <div class="profile-avatar-text img-circle">{:__('Click to edit')}</div>-->
<!--                            <button id="plupload-avatar" class="plupload" data-input-id="c-avatar"><i class="fa fa-upload"></i> {:__('Upload')}</button>-->
                        </div>
                        <div class="form-group">{:__('Id')}: {$consumer.id|htmlentities}</div>
                        <div class="form-group">{:__('Phone')}: {$consumer.phone|htmlentities}</div>
                        <div class="form-group">{:__('Wechatname')}: {$consumer.wechatname|htmlentities}</div>
                        <div class="form-group">{:__('Douyinname')}: {$consumer.douyinname|htmlentities}</div>
                        <div class="form-group">{:__('Firstlogin')}: {$consumer.firstlogin|htmlentities}</div>
                        <div class="form-group">{:__('Ordernum')}: {$consumer.ordernum|htmlentities}</div>
                        <div class="form-group">{:__('Total')}: ¥ {$consumer.money|htmlentities}</div>
                        <div class="form-group">{:__('Dealer')}: {$consumer.dealername|htmlentities}</div>
                    </div>
                </form>
            </div>
        </div>

    </div>
    <div class="col-md-8">
        <div class="panel panel-default panel-intro panel-nav">
            <div class="panel-heading">
                <ul class="nav nav-tabs" style="margin: 0 auto">
                    <li class="active"><a href="#one" data-toggle="tab"> {:__('Buygoodslist')} </a></li>
                </ul>
            </div>
            <div class="panel-body">
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade active in" id="one">
                        <div class="widget-body no-padding">
<!--                            <div id="toolbar" class="toolbar">-->
<!--                                {:build_toolbar('refresh')}-->
<!--                            </div>-->
                            {notempty name="order"}
                            {foreach name="order" item="v"}
                            <div class="goods-list">
                                <span>{$v.goods}</span>
                                <span id="right-icon" class="right-icon" onclick="change(this)"><i class="fa fa-chevron-right"></i></span>
                                <div class="goods-detail" name="goods-detail" style="display: none">
                                    <div>
                                        <span>下单时间：{$v.ordertime}</span>
                                        <span class="order-mony">金额：¥ {$v.money}</span>
                                    </div>
                                    <div>店铺：{$v.shopname}</div>
                                    <div>直播间：{$v.studioname}</div>
                                </div>
                            </div>
                            {/foreach}
                            <div style="float: right">{$order->render()}</div>
                            {else /}
                                暂无
                            {/notempty}
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
<script type="text/javascript">
    function change(t)
    {
        if($(t).next().css('display')=='none'){
            $(t).next().css('display','block');
            $(t).html('<i class="fa fa-chevron-down"></i>');
        }else{
            $(t).next().css('display','none');
            $(t).html('<i class="fa fa-chevron-right"></i>');
        }
    }
</script>
